<template>
  <el-card class="filter-card" :body-style="{ padding: '15px' }">
    <DynamicForm
      ref="formRef"
      v-model="formData"
      :form-config="formConfig"
      :gutter="16"
      type="search"
      @search="handleSearch"
      @reset="handleReset"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue";
import DynamicForm from "@/components/DynamicForm/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";
import type { FormItemConfig } from "@/components/DynamicForm/types";
import { getTemplateList } from "../../../servers";

// 定义属性和事件
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({
      name: "",
      code: "",
      template_id: "",
      status: "",
    }),
  },
});

const emit = defineEmits(["search", "reset"]);

const formRef = ref<DynamicFormInstance>();

// 模板列表
const templates = ref<any[]>([]);

// 表单数据
const formData = reactive({
  name: props.formData.name || "",
  code: props.formData.code || "",
  template_id: props.formData.template_id || "",
  status: props.formData.status || "",
});

// 监听父组件表单数据变化
watch(
  () => props.formData,
  (newVal) => {
    formData.name = newVal.name || "";
    formData.code = newVal.code || "";
    formData.template_id = newVal.template_id || "";
    formData.status = newVal.status || "";
  },
  { deep: true }
);

// 获取模板列表
const fetchTemplates = async () => {
  try {
    const { data } = await getTemplateList({ page_size: 100 });
    templates.value = data.list || data.items || [];
  } catch (error) {
    console.error("获取模板列表失败", error);
  }
};

// 表单配置
const formConfig: FormItemConfig[] = [
  {
    key: "name",
    name: "维度名称",
    type: "input",
    placeholder: "输入维度名称",
    params: {
      clearable: true,
    },
    col: { span: 4 },
  },
  {
    key: "code",
    name: "维度代码",
    type: "input",
    placeholder: "输入维度代码",
    params: {
      clearable: true,
    },
    col: { span: 4 },
  },
  {
    key: "template_id",
    name: "所属模板",
    type: "select",
    placeholder: "选择模板",
    params: {
      clearable: true,
      filterable: true,
    },
    options: [],
    col: { span: 4 },
  },
  {
    key: "status",
    name: "启用状态",
    type: "select",
    placeholder: "选择状态",
    params: {
      clearable: true,
    },
    options: [
      { label: "启用", value: "启用" },
      { label: "禁用", value: "禁用" },
    ],
    col: { span: 4 },
  },
];

// 监听模板列表变化，更新选项
watch(
  () => templates.value,
  (newTemplates) => {
    const templateOption = formConfig.find(
      (item) => item.key === "template_id"
    );
    if (templateOption) {
      templateOption.options = newTemplates.map((tpl) => ({
        label: tpl.name || tpl.template_name,
        value: tpl.id || tpl.template_id,
      }));
    }
  },
  { immediate: true }
);

// 方法 - 搜索
const handleSearch = (values: any) => {
  emit("search", { ...formData, ...values });
};

// 方法 - 重置
const handleReset = () => {
  formData.name = "";
  formData.code = "";
  formData.template_id = "";
  formData.status = "";
  emit("reset");
};

// 初始化
onMounted(() => {
  fetchTemplates();
});
</script>

<style scoped lang="scss">
.filter-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}
</style>
